<script>
  import YingbingFlip from '@/pages/genealogy/components/yingbing-flip/components/yingbing-flip/yingbing-flip.vue';
  import sheep from '@/sheep';
  import PageHeaderStyle from '@/pages/genealogy/components/pageHeaderStyle.vue';
  import MpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue';
  import { baseUrl } from '@/sheep/config';
  import debounce from '@/sheep/helper/debounce';

  export default {
    name: 'CanonizationComponents',
    data() {
      return {
        pageCurrent: 0,
        // 当前点击的照片
        currentPhoto: 0,
        // 当前点击的照片定时器
        currentPhotoTimer: null,
        is_flip: true,
        doubleClickTime: 0,
        interval: null,
        // 过滤掉的家谱成员数组
        filteredData: [],
        // 吊线图
        pendantDiagram: null,
        // 吊线图列表
        pendantDiagramList: [],
        roots: [],
        // 筛选的第一层信息
        content: [],
        // 筛选的第二层信息
        list1: [],
        // 筛选的第三层信息
        list2: [],
        // 筛选的第四层信息
        list3: [],
        // 筛选的第五层信息
        list4: [],
      };
    },
    components: { MpHtml, PageHeaderStyle, YingbingFlip },
    props: {
      list: {
        type: Array,
        default: () => [],
      },
      genealogy_id: {
        type: [Number, String],
        default: 0,
      },
      backgroouond: {
        type: String,
        default: '',
      },
      // 家谱中所有的成员
      children: {
        type: Array,
        default: () => [],
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
    },
    mounted() {
      this.filteredData = this.children;
      // 册谱列表
      this.pendantDiagramList = JSON.parse(JSON.stringify(this.list));


      // this.setPeople();

      //
      // function processAssembly(assembly, filteredData, firstMinShiObject) {
      //   // 第一行的数据
      //   assembly.content = [firstMinShiObject, {}, {}, {}];
      //
      //   // 查找各世的成员
      //   const generations = [firstMinShiObject];
      //   for (let i = 0; i < 4; i++) {
      //     const currentGen = generations[generations.length - 1];
      //     const nextGen = Array.isArray(currentGen) ? currentGen.flatMap(item => findDescendants(filteredData, item.id)) : findDescendants(filteredData, currentGen.id);
      //     generations.push(nextGen);
      //   }
      //
      //   const [, list, list2, list3, list4] = generations;
      //
      //   // 最后一个数组成员的父节点
      //   let parentNode = {};
      //   for (let i = 0; i < list3.length; i++) {
      //     if (list3[i].id === list4[0].fq_id) {
      //       parentNode = list3[i];
      //       list3.splice(i, 1);
      //       break;
      //     }
      //   }
      //
      //   // 第二行
      //   let thirdGenFiltered = [];
      //   // 第三行的数据
      //   let theSecondLine = [];
      //   // 第四行的数据
      //   let theFourthLine = [parentNode];
      //   // 第五行的数据
      //   let theThirdLine = [list4[0]];
      //   list4.splice(0, 1);
      //
      //   // 填充第五行
      //   list4.forEach(item => {
      //     if (item.fq_id === parentNode.id && theThirdLine.length < 4) {
      //       theThirdLine.push(item);
      //       theFourthLine.push({});
      //     }
      //   });
      //
      //   // 移除已添加到第五行的元素
      //   theThirdLine.forEach(item => {
      //     const index = list4.findIndex(item1 => item1.id === item.id);
      //     if (index !== -1) {
      //       list4.splice(index, 1);
      //     }
      //   });
      //
      //   // 继续填充第五行
      //   while (theThirdLine.length < 4) {
      //     if (list3.length <= 0) {
      //       fillArray(theThirdLine, 4);
      //       break;
      //     }
      //     const arr = list4.filter(item1 => item1.fq_id === list3[0].id && arr.length + theThirdLine.length < 4);
      //     if (arr.length > 0) {
      //       theThirdLine = [...theThirdLine, ...arr];
      //       arr.forEach(item => {
      //         const index = list4.findIndex(item1 => item1.id === item.id);
      //         if (index !== -1) {
      //           list4.splice(index, 1);
      //         }
      //       });
      //     } else {
      //       theThirdLine.push({});
      //     }
      //     theFourthLine.push(list3[0]);
      //     list3.splice(0, 1);
      //   }
      //
      //   // 填充第四行
      //   if (theFourthLine.length <= 4 && list3.length <= 4) {
      //     fillArray(theFourthLine, 4);
      //   }
      //
      //   // 记录第三层的成员信息
      //   list2.forEach(item => {
      //     if (item.id === theFourthLine[0].fq_id) {
      //       theSecondLine.push(item);
      //     }
      //   });
      //
      //   // 移除已添加到第三行的元素
      //   theSecondLine.forEach(item => {
      //     const index = list2.findIndex(item1 => item1.id === item.id);
      //     if (index !== -1) {
      //       list2.splice(index, 1);
      //     }
      //   });
      //
      //   console.log('第四行', theFourthLine);
      //   console.log('第五行', theThirdLine);
      //   console.log('-----------------------------------');
      //
      //   assembly.content = [...assembly.content, ...thirdGenFiltered, ...theSecondLine, ...theFourthLine, ...theThirdLine];
      //   return assembly;
      // }

      // this.pendantDiagramList.push(assembly);
      // const familyTree = this.buildTree([firstMinShiObject, ...this.filteredData]);
      // console.log(familyTree);
      // const arr = this.splitArray(familyTree);
      // arr.forEach(item => {
      //   console.log(item);
      //   let children = this.buildFamilyTree(item)
      //   children.forEach(item1=>{
      //     let assembly = { desc: 'pendantDiagram', cate_title: '吊线图' };
      //     assembly.content = item1;
      //     this.pendantDiagramList.push(assembly);
      //   })
      // });


      // firstMinShiObject.children = familyTree.filter(item => item.shi == minShi + 1);
      // console.log(firstMinShiObject);

      // 收集所有层级为5k+1的节点

      // this.calculateLevels(firstMinShiObject);
      // this.collectRoots(firstMinShiObject);
      // const result = this.roots.map(root => this.generateSubtree(root, 4));
      // // 输出结果
      // result.forEach(item => {
      //   let assembly = { desc: 'pendantDiagram', cate_title: '吊线图' };
      //   assembly.content = item;
      //   this.pendantDiagramList.push(assembly);
      //   this.drawGenealogy(item)
      // });
    },
    methods: {
      calculateLevels(node, level = 1) {
        node.calculatedLevel = level;
        if (node.children) {
          node.children.forEach(child => this.calculateLevels(child, level + 1));
        }
      },
      collectRoots(node) {
        if ((node.calculatedLevel - 1) % 5 === 0) {
          this.roots.push(node);
        }
        if (node.children) {
          node.children.forEach(this.collectRoots);
        }
      },
      generateSubtree(node, maxLevel) {
        const subtree = { ...node };
        subtree.children = [];
        if (maxLevel <= 0 || !node.children) {
          return subtree;
        }
        subtree.children = node.children.map(child => this.generateSubtree(child, maxLevel - 1));
        return subtree;
      },
      splitTreeByDepth(root, maxDepth = 5) {
        const fragments = [];
        let currentFragment = {};
        let fragmentId = 0;

        // 深度优先遍历
        const traverse = (node, depth = 1, parentFragmentId = null) => {
          if (!node) return;

          // 创建新片段的条件
          if (depth % maxDepth === 1 && depth > 1) {
            currentFragment = {
              id: `fragment_${++fragmentId}`,
              root: { ...node },
              parentFragment: parentFragmentId,
              depthRange: [depth, depth + maxDepth - 1],
              children: [],
            };
            fragments.push(currentFragment);
          } else if (depth === 1) {
            currentFragment = {
              id: `fragment_0`,
              root: { ...node },
              depthRange: [1, maxDepth],
              children: [],
            };
            fragments.push(currentFragment);
          }

          // 记录当前节点到片段
          if (currentFragment) {
            const simplifiedNode = {
              id: node.id,
              name: `${node.surname}${node.name}`,
              depth,
              children: [],
            };
            currentFragment.children.push(simplifiedNode);
          }

          // 递归子节点
          if (node.children) {
            node.children.forEach(child => {
              traverse(child, depth + 1, currentFragment.id);
            });
          }
        };

        traverse(root);
        return fragments;
      },
      splitArray(arr) {
        const result = [];
        for (let i = 0; i < arr.length; i += 5) {
          result.push(arr.slice(i, i + 5));
        }
        return result;
      },
      buildTree(arr) {
        const grouped = {};
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i];
          const shiValue = item.shi;
          if (!grouped[shiValue]) {
            grouped[shiValue] = [];
          }
          grouped[shiValue].push(item);
        }
        return Object.values(grouped);
      },
      buildFamilyTree(data) {
        // 扁平化数据并创建映射表
        const allNodes = data.flat();
        const nodeMap = new Map(allNodes.map(node => [node.id, { ...node, children: [] }]));

        // 创建根节点集合
        const roots = [];

        // 构建父子关系
        allNodes.forEach(person => {
          const parent = nodeMap.get(person.fq_id);
          if (parent) {
            if (parent.children.length < 5) { // 控制每层最大子节点数
              parent.children.push(nodeMap.get(person.id));
            } else {
              // 超过5个时创建新分支
              roots.push(nodeMap.get(person.id));
            }
          } else {
            roots.push(nodeMap.get(person.id));
          }
        });

        return roots;
      },
      debounce,
      number2Chinese(str) {
        let chinese = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
        let numStr = str.replace(/[^0-9]+/g, '');
        let year = chinese[numStr[0]] + chinese[numStr[1]] + chinese[numStr[2]] + chinese[numStr[3]];
        let month = numStr[4] === '0' ? chinese[numStr[5]] : chinese[10] + chinese[numStr[5]];
        let day = '';
        if (numStr[6] === '0') {
          day = chinese[numStr[7]];
        } else if (numStr[6] === '1') {
          if (numStr[7] === '0') {
            day = chinese[10];
          } else {
            day = chinese[10] + chinese[numStr[7]];
          }
        } else if (numStr[6] === '2' || numStr[6] === '3') {
          if (numStr[7] === '0') {
            day = chinese[numStr[6]] + chinese[10];
          } else {
            day = chinese[numStr[6]] + chinese[10] + chinese[numStr[7]];
          }
        }
        return year + '年' + month + '月' + day + '日';
      },
      currentChange(e) {
        this.pageCurrent = e.current;
      },
      skip(index) {
        this.is_flip = false;
        this.pageCurrent = index;
        setTimeout(() => {
          this.is_flip = true;
        });
        // this.$refs.flip.flipToGo(index, this.pageCurrent);
      },
      async editor(e) {
        const { code, msg } = await sheep.$api.genealogy.checkAuth({
          genealogy_id: this.genealogy_id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg);
          return;
        }
        uni.setStorageSync('editorCanonization', e);
        sheep.$router.go('/pages/canonization/textEditing');
      },
      async singleUploadPhoto(length, cate_info, content, max = 12) {
        const { code, msg } = await sheep.$api.genealogy.checkAuth({
          genealogy_id: this.genealogy_id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg);
          return;
        }
        console.log(length);
        if (length >= max) {
          sheep.$helper.toast(`最多只能上传${max}张图片`);
          return;
        }
        uni.chooseImage({
          count: max - length,
          sizeType: ['original', 'compressed'],
          sourceType: ['album'],
          success: async (res) => {
            uni.showLoading({
              title: '上传图片中，请稍后',
            });
            res.tempFilePaths.forEach((item, index1) => {
              console.log('压缩过后的图片=>', item);
              // #ifdef H5
              sheep.$platform.upload.uploadFile(item, res.tempFiles[index1].size, async (info) => {
                console.log(info);
                const { data, code, msg } = await sheep.$api.book_list.uploadImage({
                  cate_id: cate_info.cate_id,
                  genealogy_id: this.genealogy_id,
                  type: max == 12 ? 2 : 1,
                  image: info.fullurl,
                });
                if (code == 1) {
                  // uni.$emit('upLoadPhotoCate', { data, index: this.pageCurrent });
                  setTimeout(() => {
                    uni.$emit('getCanonizationDetail');
                    uni.hideLoading();
                  }, 1000);
                } else {
                  sheep.$helper.toast(msg);
                  uni.hideLoading();
                }
              });
              // #endif
              // #ifndef H5
              uni.compressImage({
                src: item,
                success: (info) => {
                  uni.uploadFile({
                    url: `${baseUrl}/api/common/uploadFile`,
                    filePath: info.tempFilePath,
                    fileType: 'image',
                    name: 'pics',
                    formData: {
                      'file': 'pics',
                    },
                    header: {
                      // #ifdef MP
                      'Content-Type': 'multipart/form-data',
                      // #endif
                      ['token']: uni.getStorageSync('token'),
                      'file': info.tempFilePath,
                    },
                    success: async (info) => {
                      let image = JSON.parse(info.data);
                      const { data, code, msg } = await sheep.$api.book_list.uploadImage({
                        cate_id: cate_info.cate_id,
                        genealogy_id: this.genealogy_id,
                        type: max == 12 ? 2 : 1,
                        image: image.data.fullurl,
                      });
                      if (code == 1) {
                        // uni.$emit('upLoadPhotoCate', { data, index: this.pageCurrent });
                        setTimeout(() => {
                          uni.$emit('getCanonizationDetail');
                          uni.hideLoading();
                        }, 1000);
                      } else {
                        sheep.$helper.toast(msg);
                        uni.hideLoading();
                      }
                    },
                  });
                },
              });
              // #endif
            });
          },
        });
      },
      async addPhoto(person, cate_info, flag = 1) {
        const { code, msg } = await sheep.$api.genealogy.checkAuth({
          genealogy_id: this.genealogy_id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg);
          return;
        }
        if (flag == 2 && person.qz_id == 0) {
          return;
        }
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album'],
          success: async (res) => {
            uni.showLoading({
              title: '上传图片中，请稍后',
              mask: true,
            });
            res.tempFilePaths.forEach((item, index1) => {
              // #ifdef H5
              sheep.$platform.upload.uploadFile(item, res.tempFiles[index1].size, async (info) => {
                const { data, code, msg } = await sheep.$api.book_list.uploadImage({
                  cate_id: cate_info.cate_id,
                  genealogy_id: this.genealogy_id,
                  type: 2,
                  image: info.fullurl,
                  relation_id: flag == 1 ? person.id : person.qz_id,
                });
                if (code == 1) {
                  // uni.$emit('upLoadPersonPhoto', { data, index: this.pageCurrent, flag });
                  setTimeout(() => {
                    uni.$emit('getCanonizationDetail');
                    uni.hideLoading();
                  }, 1000);
                } else {
                  sheep.$helper.toast(msg);
                  uni.hideLoading();
                }
              });
              // #endif
              // #ifndef H5
              uni.compressImage({
                src: item,
                success: (info) => {
                  uni.uploadFile({
                    url: `${baseUrl}/api/common/uploadFile`,
                    filePath: info.tempFilePath,
                    fileType: 'image',
                    name: 'pics',
                    formData: {
                      'file': 'pics',
                    },
                    header: {
                      // #ifdef MP
                      'Content-Type': 'multipart/form-data',
                      // #endif
                      ['token']: uni.getStorageSync('token'),
                      'file': info.tempFilePath,
                    },
                    success: async (info) => {
                      let image = JSON.parse(info.data);
                      const { data, code, msg } = await sheep.$api.book_list.uploadImage({
                        cate_id: cate_info.cate_id,
                        genealogy_id: this.genealogy_id,
                        type: 1,
                        image: image.data.fullurl,
                        relation_id: flag == 1 ? person.id : person.qz_id,
                      });
                      if (code == 1) {
                        // uni.$emit('upLoadPersonPhoto', { data, index: this.pageCurrent, flag });
                        setTimeout(() => {
                          uni.$emit('getCanonizationDetail');
                          uni.hideLoading();
                        }, 1500);
                      } else {
                        sheep.$helper.toast(msg);
                        uni.hideLoading();
                      }
                    },
                  });
                },
              });
              // #endif
            });
          },
        });
      },
      touchImageStart(item, index) {
        uni.showModal({
          title: '是否删除该图片？',
          cancelText: '取消',
          confirmText: '确定',
          success: async (res) => {
            if (!!res.confirm) {
              uni.showLoading({
                title: '删除中，请稍后',
                mask: true,
              });
              const { code, msg } = await sheep.$api.book_list.deleteImage({
                id: item.id,
              });
              if (code == 1) {
                // uni.$emit('deleteImage',{item,index});
                setTimeout(() => {
                  uni.$emit('getCanonizationDetail');
                  uni.hideLoading();
                }, 1500);
              } else {
                sheep.$helper.toast(msg);
                uni.hideLoading();
              }
            }
          },
        });
      },
      refresh() {
        this.$refs.flip.refresh();
      },
      blowUp() {
        uni.$emit('blowUp');
      },
      // 双击放大
      doubleClickToEnlarge() {
        if (this.doubleClickTime <= 0) {
          this.doubleClickTime = 500;
        } else {
          this.doubleClickTime = 0;
          uni.$emit('blowUp');
          clearInterval(this.interval);
          return;
        }
        this.interval = setInterval(() => {
          this.doubleClickTime -= 100;
          if (this.doubleClickTime <= 0) {
            this.doubleClickTime = 0;
            clearInterval(this.interval);
          }
        }, 100);
      },
      // 单张图片浏览
      singleImageView(item) {
        uni.$emit('showImagePreview', {
          imageUrl: item.image,
          isShowControls: false,
        });
      },
      // 世系表图片放大
      imageView(item, content, flag) {
        if (flag == 1 && !item.image) {
          this.addPhoto(item, content, 1);
          return;
        }
        if (flag == 2 && !item.qz_image) {
          this.addPhoto(item, content, 2);
          return;
        }
        if (flag == 1) {
          uni.$emit('showImagePreview', {
            imageUrl: item.image,
            isShowControls: true,
            confirm: () => {
              uni.$emit('hideImagePreview');
              this.addPhoto(item, content, 1);
            },
          });
        }
        if (flag == 2) {
          uni.$emit('showImagePreview', {
            imageUrl: item.qz_image,
            isShowControls: true,
            confirm: () => {
              uni.$emit('hideImagePreview');
              this.addPhoto(item, content, 2);
            },
          });
        }
      },
      // 设置吊线图
      setPeople(allIndex = 0,shi = 0) {

        if (this.filteredData.length <= 0) {
          return;
        }
        // 判断是否有子节点
        if (this.inspectList()) {
          let assembly = { desc: 'pendantDiagram', cate_title: '吊线图' };
          // 第一行
          let firstGenFiltered = [];
          let thirdGenFiltered = [];
          let theSecondLine = [];
          let theFourthLine = [];
          let theThirdLine = [];
          // console.log('list1', this.list1);
          // console.log('list2', this.list2);
          // console.log('list3', this.list3);
          // console.log('list4', this.list4);
          if (this.list4.length > 0) {

          } else {
            theThirdLine = [{}, {}, {}, {}];
          }

          if (this.list3.length > 0) {
          } else {
            theFourthLine = [{}, {}, {}, {}];
          }

          if (this.list2.length > 0) {
            let count = this.checkEmptyObject(theFourthLine);
            if (count > 0) {

            } else {
              let num = 0;
              while (num < 4) {
                theSecondLine.push(this.list2[0]);
                this.list2.splice(0, 1);
                this.list3.forEach((item, index) => {
                  if (item.id == theSecondLine[num].fq_id) {
                    thirdGenFiltered.push(item);
                  }
                });
                if (thirdGenFiltered.length > 0) {
                  this.list2.forEach(item => {
                    if (item.fq_id == thirdGenFiltered[0].id) {
                      theSecondLine.push(item);
                    }
                  });
                } else {
                  num++;
                }
              }
            }
          } else {
            theSecondLine = [{}, {}, {}, {}];
          }

          if (this.list1.length > 0) {
            let num = 0;
            while (num < 4) {
              if (!!theSecondLine[num] && JSON.stringify(theSecondLine[num]) != '{}') {
                let arr = [];
                this.list1.forEach(item => {
                  if (item.id == theSecondLine[num].fq_id) {
                    arr.push(item);
                  }
                });

                if (arr.length > 0) {
                  arr.forEach(item => {
                    theSecondLine.push(item);
                  });
                  theSecondLine.forEach(item => {
                    console.log(item);
                    this.list1.forEach((item1, index1) => {
                      if (!!item && item1.id == item.id) {
                        this.list1.splice(index1, 1);
                      }
                    });
                  });
                } else {
                  thirdGenFiltered.push({});
                }
                num++;
              } else {
                num++;
              }
            }
            if(thirdGenFiltered.length <4){
              if(this.list1.length>0){
                let num = 0;
                while (num < 4 - thirdGenFiltered.length){
                  if(!!this.list1[num] && JSON.stringify(this.list1[num]) != '{}'){
                    thirdGenFiltered.push(this.list1[num]);
                    this.list1.splice(num, 1);
                  }else{
                    thirdGenFiltered.push({})
                  }
                }
              }
            }
          } else {
            let num = 4 - thirdGenFiltered.length;
            for (let i = 0; i < num; i++) {
              thirdGenFiltered.push({});
            }
          }
          if (this.content.length > 0) {

          } else {
            let num = 4 - firstGenFiltered.length;
            for (let i = 0; i < num; i++) {
              firstGenFiltered.push({});
            }
          }

          assembly.content = [
            ...firstGenFiltered,
            ...thirdGenFiltered,
            ...theSecondLine,
            ...theFourthLine,
            ...theThirdLine,
          ];
          assembly.content.forEach(item => {
            this.filteredData.forEach((item1, index1) => {
              if (JSON.stringify(item) != '{}' && !!item && item.id == item1.id) {
                this.filteredData.splice(index1, 1);
              }
            });
          });
          assembly.content.forEach((item,index)=>{
            if(!item){
              assembly.content[index] = {};
            }
          })
          console.log('1',this.checkEmptyObject(assembly.content));
          if(this.checkEmptyObject(assembly.content) > 0){
            this.pendantDiagramList.push(assembly);
          }
          // this.pendantDiagramList.push(assembly);
          this.setPeople(allIndex + 1,shi);
        } else {
          let minShi = shi;
          const num = this.filteredData.filter(item => item.is_spouse !== 0&& item.shi >= minShi);
          // console.log(num);
          let firstMinShiObject = {};
          if (num.length > 0) {
            minShi = Math.min(...num.map(item =>
              parseInt(item.shi) || 0, // 确保转换为数字
            ));
            // 4. 如果需要第一个匹配项
            firstMinShiObject = num.find(item =>
              parseInt(item.shi) === minShi,
            );
          }
          this.filteredData = num.filter(item => item.fq_id != 0 && item.shi >= minShi);
          // console.log(allIndex,minShi,this.filteredData);
          let assembly = { desc: 'pendantDiagram', cate_title: '吊线图' };

          console.log('------------------');

          // 首页的第一世
          // 第一行的数据
          this.content = [firstMinShiObject];
          // 查找第二世的成员
          this.list1 = this.filteredData.filter(item => item.fq_id == firstMinShiObject.id).sort((a, b) => a.level - b.level);
          // 查找第三世的成员
          this.list2 = [];
          this.list1.forEach((item, index) => {
            let list = [];
            list = this.filteredData.filter(item1 => item1.fq_id == item.id).sort((a, b) => a.level - b.level);
            list.forEach(item1 => {
              this.list2.push(item1);
            });
          });
          // 查找第四世的成员
          this.list3 = [];
          this.list2.forEach((item, index) => {
            let list = [];
            list = this.filteredData.filter(item1 => item1.fq_id == item.id).sort((a, b) => a.level - b.level);
            list.forEach(item1 => {
              this.list3.push(item1);
            });
          });
          // 查找第五世的成员
          this.list4 = [];
          this.list3.forEach((item, index) => {
            let list = [];
            list = this.filteredData.filter(item1 => item1.fq_id == item.id).sort((a, b) => a.level - b.level);
            list.forEach(item1 => {
              this.list4.push(item1);
            });
          });
          // console.log('list3', this.list3);

          // 最后一个数组成员的父节点
          let parentNode = {};
          // 循环查找并删除对象
          if(this.list4.length > 0){
            for (let i = 0; i < this.list3.length; i++) {
              if (this.list3[i].id === this.list4[0].fq_id) {
                parentNode = this.list3[i];
                this.list3.splice(i, 1);
                break;
              }
            }
          }
          console.log('list1', this.list1);
          console.log('list2', this.list2);
          console.log('list3', this.list3);
          console.log('list4', this.list4);
          if(!this.inspectList()){
            return;
          }
          // console.log('list1', this.list1);
          // console.log('list2', this.list2);
          // console.log('list3', this.list3);
          // console.log('list4', this.list4);

          // 第一行
          let firstGenFiltered = [];
          // 第二行
          let thirdGenFiltered = [];
          // 第三行的数据
          let theSecondLine = [];
          // 第四行的数据
          let theFourthLine = [parentNode];
          // 第五行的数据
          let theThirdLine = [this.list4[0]];


          this.list4.splice(0, 1);
          this.list4.forEach((item, index) => {
            if (item.fq_id == parentNode.id && theThirdLine.length < 4) {
              theThirdLine.push(item);
              theFourthLine.push({});
            }
          });
          theThirdLine.forEach(item => {
            this.list4.forEach((item1, index1) => {
              if (item1.id == item.id) {
                this.list4.splice(index1, 1);
              }
            });
          });
          if (theThirdLine.length < 4) {
            if (this.list3.length <= 0) {
              let num = 4 - theThirdLine.length;
              for (let i = 0; i < num; i++) {
                theThirdLine.push({});
              }
            } else {
              let arr = [];
              this.list4.forEach((item1, index1) => {
                if (item1.fq_id == this.list3[0].id && arr.length + theThirdLine.length < 4) {
                  arr.push(item1);
                }
              });
              if (arr.length > 0) {
                theThirdLine = [...theThirdLine, ...arr];
                arr.forEach(item => {
                  this.list4.forEach((item1, index1) => {
                    if (item1.id == item.id) {
                      this.list4.splice(index1, 1);
                    }
                  });
                });
              } else {
                theThirdLine.push({});
              }
              theFourthLine.push(this.list3[0]);
              this.list3.splice(0, 1);
            }
          }
          if (theThirdLine.length < 4) {
            if (this.list3.length <= 0) {
              let num = 4 - theThirdLine.length;
              for (let i = 0; i < num; i++) {
                theThirdLine.push({});
              }
            } else {
              let arr = [];
              this.list4.forEach((item1, index1) => {
                if (item1.fq_id == this.list3[0].id && arr.length + theThirdLine.length < 4) {
                  arr.push(item1);
                }
              });
              if (arr.length > 0) {
                theThirdLine = [...theThirdLine, ...arr];
                arr.forEach(item => {
                  this.list4.forEach((item1, index1) => {
                    if (item1.id == item.id) {
                      this.list4.splice(index1, 1);
                    }
                  });
                });
                if (arr.length > 1) {
                  let num = 4 - theThirdLine.length;
                }

              } else {
                theThirdLine.push({});
              }
              theFourthLine.push(this.list3[0]);
              this.list3.splice(0, 1);
            }
          }

          // 记录第四层的成员信息
          if (theFourthLine.length < 4) {
            if (this.list3.length <= 0) {
              let num = 4 - theFourthLine.length;
              for (let i = 0; i < num; i++) {
                theFourthLine.push({});
              }
            }
          }
          // 记录第三行的成员信息
          let theFourthLineIndex = 0;
          while (theFourthLineIndex < theFourthLine.length) {
            let arr = [];
            this.list2.forEach(item => {
              if (item.id === theFourthLine[theFourthLineIndex].fq_id) {
                arr.push(item);
              }
            });
            if (arr.length > 0) {
              theSecondLine = [...theSecondLine, ...arr];
              arr.forEach(item => {
                const index = this.list2.findIndex(item1 => item1.id === item.id);
                if (index !== -1) {
                  this.list2.splice(index, 1);
                }
              });
            } else {
              theSecondLine.push({});
            }
            theFourthLineIndex++;
          }
          // 记录第二行的成员信息
          let theSecondLineIndex = 0;
          while (theSecondLineIndex < theSecondLine.length) {
            let arr = [];
            this.list1.forEach(item => {
              if (item.id === theSecondLine[theSecondLineIndex].fq_id) {
                arr.push(item);
              }
            });
            if (arr.length > 0) {
              thirdGenFiltered = [...thirdGenFiltered, ...arr];
              arr.forEach(item => {
                const index = this.list1.findIndex(item1 => item1.id === item.id);
                if (index !== -1) {
                  this.list1.splice(index, 1);
                }
              });
            } else {
              thirdGenFiltered.push({});
            }
            theSecondLineIndex++;
          }
          // 记录第一行的成员信息
          let theFirstLineIndex = 0;
          while (theFirstLineIndex < thirdGenFiltered.length) {
            let arr = [];
            this.content.forEach(item => {
              if (item.id == thirdGenFiltered[theFirstLineIndex].fq_id) {
                arr.push(item);
              }
            });
            // console.log(arr);
            if (arr.length > 0) {
              firstGenFiltered = [...firstGenFiltered, ...arr];
              arr.forEach(item => {
                const index = this.content.findIndex(item1 => item1.id === item.id);
                if (index !== -1) {
                  this.content.splice(index, 1);
                }
              });
            } else {
              firstGenFiltered.push({});
            }
            theFirstLineIndex++;
          }
          // console.log('第二行',thirdGenFiltered);
          // console.log('第三行',theSecondLine);
          // console.log('第四行',theFourthLine);
          // console.log('第五行',theThirdLine);

          console.log('-----------------------------------');
          assembly.content = [...firstGenFiltered, ...thirdGenFiltered, ...theSecondLine, ...theFourthLine, ...theThirdLine];
          assembly.content.forEach((item,index)=>{
            if(!item){
              assembly.content[index] = {};
            }
          })
          assembly.content.forEach(item => {
            this.filteredData.forEach((item1, index1) => {
              if (JSON.stringify(item) != '{}' && !!item && item.id == item1.id) {
                this.filteredData.splice(index1, 1);
              }
            });
          });
          console.log('2',this.checkEmptyObject(assembly.content));
          if(this.checkEmptyObject(assembly.content) > 0){
            this.pendantDiagramList.push(assembly);
          }

          this.setPeople(allIndex+ 1,minShi + 5);
        }
      },
      inspectList() {
        // console.log(this.list1, this.list2, this.list3, this.list4);
        return this.list1.length > 0 || this.list2.length > 0 || this.list3.length > 0 || this.list4.length > 0;
      },
      // 检查有几个空对象
      checkEmptyObject(arr) {
        let count = 0;
        for (let i = 0; i < arr.length; i++) {
          if (JSON.stringify(arr[i]) != '{}') {
            count++;
          }
        }
        return count;
      },
    },
  };
</script>

<template>
  <view class="flex-sub flex" style="width: 750rpx;height: 100%;overflow: hidden"
        @click.stop="doubleClickToEnlarge"
  >
    <yingbing-flip v-if="is_flip" style="width: 750rpx"
                   ref="flip"
                   type="real"
                   :data="pendantDiagramList"
                   :current="pageCurrent"
                   @change="currentChange"
                   :background="backgroouond.indexOf('http') != -1 ? `url('${backgroouond}')no-repeat` : `url('${nc_image}${backgroouond}')no-repeat`"
    >
      <!-- #ifndef MP-WEIXIN -->
      <template #default="{item,index}">
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <template style="width: 100%;height: 100%;" v-for="(item, index) in pendantDiagramList" :slot="`wx:${index}`">
          <!-- #endif -->
          <!-- 首页封面 -->
          <view class="wh_750 cover"
                :style="{
                  background: item.cover_image_url.indexOf('http') != -1 ? `url('${item.cover_image_url}')no-repeat` : `url('${nc_image}${item.cover_image_url}') no-repeat`,
                  backgroundSize:'750rpx 100%'
                }"
                v-if="item.desc == 0"
          >
            <view class="wh_383 bg_FFFFFF flex align-center justify-center"
                  style="height: 891rpx;position: absolute;top: 50%;right: 111rpx;transform: translateY(-50%)"
            >
              <view class="wh_343 flex flex-column align-center justify-around"
                    style="height: 851rpx;border: 4rpx solid #9F9F9F;"
              >
                <view class="wh_343 flex align-center justify-center">
                  <view class="wh_60 mr_6 flex flex-column align-center justify-between"
                        style="height: 664rpx;border: 2rpx solid #9F9F9F;"
                  >
                    <view class="fs_27 color_42403C fw_500 wh_27 mt_20"
                          style="text-align: center"
                    >
                      {{ item.branch }}
                    </view>
                    <view class="fs_27 color_42403C fw_500 wh_27 mt_20"
                          style="text-align: center"
                    >
                      {{ item.hall_num }}
                    </view>
                    <view class="fs_27 color_42403C fw_500 wh_27 mb_20"
                          style="text-align: center"
                    >
                      主编人·{{ item.editor }}
                    </view>
                  </view>
                  <view class="wh_196 flex flex-column align-center justify-center"
                        style="height: 664rpx;border: 2rpx solid #9F9F9F;"
                  >
                    <view class="color_42403C fw_500"
                          style="text-align: center;"
                          :style="{
                           fontSize:item.title.length < 4 ? '100rpx' : item.title.length < 5  ? '90rpx' : item.title.length < 6  ? '80rpx' :item.title.length < 7  ? '70rpx' : item.title.length < 8  ? '60rpx' :item.title.length < 9  ? '50rpx' : item.title.length < 10  ? '40rpx' : '30rpx',
                           width:item.title.length < 4 ? '100rpx' : item.title.length < 5  ? '90rpx' : item.title.length < 6  ? '80rpx' :item.title.length < 7  ? '70rpx' : item.title.length < 8  ? '60rpx' :item.title.length < 9  ? '50rpx' : item.title.length < 10  ? '40rpx' : '30rpx'
                          }"
                    >
                      {{ item.title }}
                    </view>
                  </view>
                  <view class="wh_60 ml_6 flex flex-column align-center justify-end"
                        style="height: 664rpx;border: 2rpx solid #9F9F9F;"
                  >
                    <view class="fs_24 color_42403C fw_500 wh_27 mb_20"
                          style="text-align: center"
                    >
                      创建日期·{{ number2Chinese(item.createtime) }}
                    </view>
                  </view>
                </view>
                <view class="wh_334 hW_168"
                      style="border: 2rpx solid #9F9F9F;overflow: hidden;"
                >
                  <image class="wh_334 hW_168" :src="`${IMG_URL}/index/canonization_cover_background.png`"></image>
                </view>
              </view>
            </view>
            <!--            <view class="hW_40 flex align-center justify-around"-->
            <!--                  style="position: absolute;right: 28rpx;bottom: 96rpx;background: rgba(255,66,6,0.6);border-radius: 36rpx;padding: 0 12rpx;z-index:999999999"-->
            <!--            >-->
            <!--              <image :src="`${IMG_URL}/index/cate_bg_all.png`" class="wh_25 hW_26"-->
            <!--                     @start.stop-->
            <!--                     @touchmove.stop-->
            <!--                     @touchend.stop="blowUp()"-->
            <!--                     @touchcancel.stop-->
            <!--                     @mousedown.stop-->
            <!--                     @mousemove.stop-->
            <!--                     @mouseup.stop-->
            <!--              ></image>-->
            <!--            </view>-->
          </view>
          <view class="wh_750 flex flex-column align-center justify-center"
                style="height: 80%;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);"
                v-else
          >
            <page-header-style :info="item"
                               :genealogicalInformation="list[0]"
                               :current="pageCurrent"
                               :index="index"
                               :genealogy_id="genealogy_id"
                               style="height: 100%;" class="flex-sub"
                               @editor="editor"
            >
              <template style="width: 100%;height: 100%;" #content="{item,content}">
                <view class="flex flex-column align-center"
                      style="width: 100%;height: 100%;"
                >
                  <view class="canonizationHeader flex align-center justify-center mt_15 fs_32 fw_500 color_4B4B4B"
                        v-if="item.sys_id != 2 && item.sys_id != 3"
                  >
                    {{ item.cate_title }}
                  </view>
                  <!-- 目录 -->
                  <view
                    style="width: 100%; height: 100%;display: grid;grid-template-columns: repeat(1,1fr);grid-template-rows: repeat(16,1fr)"
                    v-if="item.desc == 1 && item.sys_id == 0"
                  >
                    <view style="width: 100%;"
                          class="flex align-center justify-between"
                          v-for="(item1,index) in content.content"
                          :key="index"
                          @click.stop="skip(item1.page)"
                          @mousedown.stop
                          @mousemove.stop
                          @mouseup.stop
                    >
                      <view class="ml_20 fs_30 fw_500 color_4B4B4B">{{ item1.title }}</view>
                      <view class="flex-sub ml_20 mr_20" style="border-bottom: 2rpx dashed  #4B4B4B;"></view>
                      <view class="mr_20 fs_30 fw_500 color_4B4B4B">{{ item1.page }}
                      </view>
                    </view>
                  </view>
                  <!-- 索引 -->
                  <view class="mt_20 flex"
                        style="width: 100%;height: 90%"
                        v-else-if="item.desc == 'cate' && item.sys_id == 1"
                  >
                    <view style="border-right: 2rpx solid #BF8257;"
                          class="flex-sub flex flex-column"
                    >
                      <template v-for="(item2,index) in content.content" :key="index">
                        <view v-if="item2.desc == 'title' && index < 21"
                              class="mt_5 hW_40 flex align-center justify-center bg_FF4206 ml_10 mr_10 fs_28 color_FFFFFF fw_500"
                        >
                          {{ item2.title }}
                        </view>
                        <view v-if="item2.desc == 'shi' && index < 21"
                              class="flex align-center justify-between ml_10 mr_10 mt_12"
                              @click.stop="skip(item2.page)"
                              @mousedown.stop
                              @mousemove.stop
                              @mouseup.stop
                        >
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.title }}</view>
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                        </view>
                        <view v-if="item2.desc == 'people' && index < 21"
                              class="flex align-center justify-between ml_10 mr_10 mt_12"
                              @click.stop="skip(item2.page)"
                              @mousedown.stop
                              @mousemove.stop
                              @mouseup.stop
                        >
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.name }}</view>
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                        </view>
                      </template>
                    </view>
                    <view style="height: 100%;border-right: 2rpx solid #BF8257;"
                          class="flex flex-column flex-sub"
                    >
                      <template v-for="(item2,index) in content.content" :key="index">
                        <view v-if="item2.desc == 'title' && index >= 21 && index < 42"
                              class="mt_5 hW_40 flex align-center justify-center bg_FF4206 ml_10 mr_10 fs_28 color_FFFFFF fw_500"
                        >
                          {{ item2.title }}
                        </view>
                        <view v-if="item2.desc == 'shi' && index >= 21 && index < 42"
                              class="flex align-center justify-between ml_10 mr_10 mt_12"
                              @click.stop="skip(item2.page)"
                              @mousedown.stop
                              @mousemove.stop
                              @mouseup.stop
                        >
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.title }}</view>
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                        </view>
                        <view v-if="item2.desc == 'people' && index >= 21 && index < 42"
                              class="flex align-center justify-between ml_10 mr_10 mt_12"
                              @click.stop="skip(item2.page)"
                              @mousedown.stop
                              @mousemove.stop
                              @mouseup.stop
                        >
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.name }}</view>
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                        </view>
                      </template>
                    </view>
                    <view style="height: 100%;"
                          class="flex flex-column flex-sub"
                    >
                      <template v-for="(item2,index) in content.content" :key="index">
                        <view v-if="item2.desc == 'title' && index >= 42 && index < 63"
                              class="mt_5 hW_40 flex align-center justify-center bg_FF4206 ml_10 mr_10 fs_28 color_FFFFFF fw_500"
                        >
                          {{ item2.title }}
                        </view>
                        <view v-if="item2.desc == 'shi' && index >= 42 && index < 63"
                              class="flex align-center justify-between ml_10 mr_10 mt_12"
                              @click.stop="skip(item2.page)"
                              @mousedown.stop
                              @mousemove.stop
                              @mouseup.stop
                        >
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.title }}</view>
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                        </view>
                        <view v-if="item2.desc == 'people' && index >= 42 && index < 63"
                              class="flex align-center justify-between ml_10 mr_10 mt_12"
                              @click.stop="skip(item2.page)"
                              @mousedown.stop
                              @mousemove.stop
                              @mouseup.stop
                        >
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.name }}</view>
                          <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                        </view>
                      </template>
                    </view>
                  </view>
                  <!-- 照片墙封面 -->
                  <view class="flex-sub flex align-center justify-center"
                        style="width: 100%"
                        v-else-if="item.desc == 'cate' && item.sys_id == 2"
                  >
                    <view class="wh_151 flex flex-column align-center">
                      <view class="wh_151 hW_19"
                            style="background: #BF8257;border-radius: 10rpx"
                      ></view>
                      <view class="wh_151 hW_315 flex align-center justify-center mt_4"
                            style="border: 3rpx solid #BF8257">
                        <view class="fs_65 fw_500 color_4B4B4B wh_65"
                              style="text-align: center;line-height: 95rpx"
                        >
                          照片墙
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 照片墙内容 -->
                  <view class="flex-sub flex align-center justify-center"
                        style="width: 100%;"
                        v-else-if="item.desc == 'content' && item.sys_id == 2 && content.type == 1"
                  >
                    <view class="flex-column align-center"
                          style="width: 95%;height: 95%;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(4, 1fr);grid-gap: 15rpx"
                    >
                      <template v-for="(item,index) in content.content" :key="index">
                        <view class="flex align-center justify-center flex-column"
                              style="background: rgba(255,255,255,0.34);width: 100%;height: 100%;position: relative;"
                              @click.stop="singleImageView(item)"
                        >
                          <image style="position: absolute;top: 10rpx;left: 10rpx"
                                 class="wh_28 hW_28 z_10"
                                 :src="`${IMG_URL}/index/wechat_genealog_del.png`"
                                 @click.stop="debounce(touchImageStart(item,index),2000,true)"
                          ></image>
                          <!--                          &lt;!&ndash; #ifdef MP-WEIXIN &ndash;&gt;-->
                          <!--                          <image :src="item.we_image"-->
                          <!--                                 style="width: 100%;height: 100%"-->
                          <!--                                 mode="aspectFill"-->
                          <!--                          ></image>-->
                          <!--                          &lt;!&ndash; #endif &ndash;&gt;-->
                          <image :src="item.image"
                                 style="width: 100%;height: 100%"
                                 mode="aspectFit"
                          ></image>
                        </view>
                      </template>
                      <template v-if="content.content.length < 12">
                        <view class="flex align-center justify-center flex-column photoAlbum_bg"
                              style="width: 100%;height: 100%;"
                              @click.stop="singleUploadPhoto(content.content.length,item,content)"
                              @mousedown.stop
                              @mousemove.stop
                              @mouseup.stop
                        >
                          <image class="wh_77 hW_77" :src="`${IMG_URL}/index/cation_upload.png`"></image>
                          <view
                            class="wh_123 hW_34 mt_10 fs_16 fw_500 color_FFFFFF flex align-center justify-center"
                            style="border-radius: 20rpx;background: #FF7950"
                          >上传照片
                          </view>
                        </view>
                      </template>
                    </view>
                  </view>
                  <!-- 单张照片墙 -->
                  <view class="flex-sub flex align-center justify-center"
                        style="width: 100%;"
                        v-else-if="item.desc == 'content' && item.sys_id == 2 && content.type == 2"
                  >
                    <view class="flex flex-column align-center justify-center"
                          style="width: 95%;height: 95%;position: relative"
                    >
                      <template v-if="!!content.content && content.content.length > 0">
                        <image style="position: absolute;top: 10rpx;left: 10rpx"
                               class="wh_28 hW_28 z_10"
                               :src="`${IMG_URL}/index/wechat_genealog_del.png`"
                               @click.stop="debounce(touchImageStart(content.content[0],0),2000,true)"
                        ></image>
                        <!--                        &lt;!&ndash; #ifdef MP-WEIXIN &ndash;&gt;-->
                        <!--                        <image :src="content.content[0].we_image"-->
                        <!--                               style="width: 100%;height: 100%"-->
                        <!--                               mode="aspectFill"-->
                        <!--                        ></image>-->
                        <!--                        &lt;!&ndash; #endif &ndash;&gt;-->
                        <image :src="content.content[0].image"
                               style="width: 100%;height: 100%"
                               mode="aspectFit"
                               @click.stop="singleImageView(content.content[0])"
                        ></image>
                      </template>
                      <template v-else>
                        <view class=" flex align-center justify-end flex-column bigPhoto"
                              style="width: 572rpx;height: 385rpx"
                              @click.stop="singleUploadPhoto(content.content.length,item,content,1)"
                        >
                          <!--                          <image class="wh_77 hW_77" :src="`${IMG_URL}/index/cation_upload.png`"></image>-->
                          <view class="mt_8 fs_23 fw_500 color_FFFFFF">上传宗亲合照</view>
                          <view
                            class="mt_12 mb_55 wh_171 hW_48 flex align-center justify-center bg_FF7950 fs_22 fw_500 color_FFFFFF"
                            style="border-radius: 23rpx"
                          >
                            点击替换
                          </view>
                        </view>
                      </template>
                    </view>
                  </view>
                  <!-- 世系表封面 -->
                  <view class="flex-sub flex align-center justify-center"
                        style="width: 100%"
                        v-else-if="item.desc == 'cate' && item.sys_id == 3"
                  >
                    <view class="wh_151 flex flex-column align-center">
                      <view class="wh_151 hW_19"
                            style="background: #BF8257;border-radius: 10rpx"
                      ></view>
                      <view class="wh_151 hW_315 flex align-center justify-center mt_4"
                            style="border: 3rpx solid #BF8257">
                        <view class="fs_65 fw_500 color_4B4B4B wh_65"
                              style="text-align: center;line-height: 95rpx"
                        >
                          世系表
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 世系表内容 -->
                  <view class="flex flex-column align-center justify-between mt_12"
                        style="width: 100%;height: 95%"
                        v-else-if="item.desc == 'content' && item.sys_id == 3"
                  >
                    <view class="wh_595 mt_12 genealogy_label"
                          style="border: 3rpx solid #BF8257;height: 48%"
                          v-for="(item,index) in content.content"
                          :key="index"
                    >
                      <view class="title flex flex-column align-center justify-center fs_30 color_4B4B4B fw_500"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                      >
                        <view style="writing-mode: vertical-rl;white-space: nowrap">{{ item.shi_cn }}</view>
                        <text class="mt_6" style="writing-mode: vertical-rl;white-space: nowrap;text-align: center">
                          【{{ item.generation || '辈' }}】
                        </text>
                      </view>
                      <view class="name flex flex-column align-center justify-center fs_30 fw_500 color_696969"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                      >
                        姓名
                      </view>
                      <view class="mate flex flex-column align-center justify-center fs_30 fw_500 color_696969"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                      >
                        配偶
                      </view>
                      <view class="parent flex flex-column align-center justify-center fs_30 fw_500 color_696969"
                            style="border-bottom: 2rpx solid #BF8257;"
                      >
                        父母
                      </view>
                      <view class="name1 flex flex-column align-center justify-center fs_30 color_4B4B4B fw_500"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                      >
                        {{ item.name }}
                      </view>
                      <view class="name2 flex flex-column align-center justify-center fs_30 color_4B4B4B fw_500"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                      >
                        {{ item.qz_name }}
                      </view>
                      <view class="parent1 flex flex-column align-center justify-center fs_22 color_4B4B4B fw_500"
                            style="border-bottom: 2rpx solid #BF8257;"
                      >
                        <template v-for="(item1,index1) in item.parents" :key="index1">
                          <view>
                            {{ item1.surname }}{{ item1.name }}
                          </view>
                        </template>
                      </view>
                      <view class="upload1 flex flex-column align-center justify-center"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                            @click.stop="imageView(item,content,1)"
                            @mousedown.stop
                            @mousemove.stop
                            @mouseup.stop
                      >

                        <template v-if="!!item.image">
                          <image :src="item.image" mode="aspectFit" style="width: 95%;height: 95%"></image>
                        </template>
                        <template v-else>
                          <image :src="`${IMG_URL}/index/cate_no_image.png`" class="wh_85 hW_85"></image>
                          <view class="fs_18 color_696969 fw_500 mt_5">点击</view>
                          <view class="fs_18 color_696969 fw_500">添加照片</view>
                        </template>
                      </view>
                      <view class="upload2 flex flex-column align-center justify-center"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                            @click.stop="imageView(item,content,2)"
                            @mousedown.stop
                            @mousemove.stop
                            @mouseup.stop
                      >
                        <template v-if="item.qz_id == 0">

                        </template>
                        <template v-else-if="!!item.qz_image">
                          <image :src="item.qz_image" mode="aspectFill" style="width: 95%;height: 95%"></image>
                        </template>
                        <template v-else>
                          <image :src="`${IMG_URL}/index/cate_no_image.png`" class="wh_85 hW_85"></image>
                          <view class="fs_18 color_696969 fw_500 mt_5">点击</view>
                          <view class="fs_18 color_696969 fw_500">添加照片</view>
                        </template>
                      </view>
                      <view
                        class="sonsAndDaughters flex flex-column align-center justify-center fs_30 fw_500 color_696969"
                        style="border-bottom: 2rpx solid #BF8257;"
                      >
                        子女
                      </view>
                      <view
                        class="brotherAndSister flex flex-column align-center justify-center fs_20 color_4B4B4B fw_500"
                        style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                      >
                        <view class="wh_40">
                          {{ item.brother_desc }}
                        </view>
                      </view>
                      <view
                        class="familyName flex flex-column align-center justify-center fs_22 color_4B4B4B fw_500">
                        <template v-for="(item2,index2) in item.children" :key="index2">
                          <view class="mr_5">
                            {{ item2.surname }}{{ item2.name }}
                          </view>
                        </template>
                      </view>
                      <view class="ranking flex flex-column align-center justify-center fs_20 color_4B4B4B fw_500"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                      >
                        <view class="wh_40">
                          {{ item.level_desc }}
                        </view>
                      </view>
                      <view class="birthday1 flex flex-column align-center justify-center fs_20 color_4B4B4B fw_500"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                      >
                        <text>{{ item.birthday }}</text>
                        <text>{{ item.lunar_birthday }}</text>
                      </view>
                      <view class="birthday2 flex flex-column align-center justify-center fs_20 color_4B4B4B fw_500"
                            style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                      >
                        <text>{{ item.qz_birthday }}</text>
                        <text>{{ item.qz_lunar_birthday }}</text>
                      </view>
                      <view class="personalProfile fs_20 color_4B4B4B fw_500"
                            style="border-right: 2rpx solid #BF8257;"
                      >
                        {{ item.remark }}
                      </view>
                    </view>
                  </view>
                  <!-- 吊线图 -->
                  <view class="flex flex-column align-center mt_12"
                        style="width: 100%;height: 90%"
                        v-else-if="item.desc == 'pendantDiagram'"
                  >
                    <view class="flex flex-column flex-sub" style="width: 96%">
                      <s-pendant-diagram :data="item.content"></s-pendant-diagram>
                    </view>
                  </view>
                  <view class="flex-sub flex flex-column align-center justify-between mt_12"
                        style="width: 100%"
                        v-else
                  >
                    <view class="mt_12" style="width: 95%;height: 95%;">
                      <text class="fs_28 fw_500 color_4B4B4B">{{ content.content }}</text>
                    </view>
                  </view>
                </view>
              </template>
            </page-header-style>
          </view>
        </template>
    </yingbing-flip>


  </view>
</template>

<style scoped lang="scss">
  .cover {
    height: 100%;
    position: relative;
  }

  .canonizationHeader {
    min-width: 232rpx;
    min-height: 55rpx;
    background: url($uni-bg-url-sq + '/chineseSurname/jiapu_background_bg.png') no-repeat;
    background-size: 100% 100%;
  }

  .genealogy_label {
    display: grid;
    grid-template: "a b b c c d d"
                   "a e e f f g g"
                   "a upload1 upload1 upload2 upload2 g g"
                   "a upload1 upload1 upload2 upload2 sonsAndDaughters sonsAndDaughters"
                   "brotherAndSister upload1 upload1 upload2 upload2 familyName familyName"
                   "ranking birthday1 birthday1 birthday2 birthday2 familyName familyName"
                   "personalProfile personalProfile personalProfile personalProfile personalProfile familyName familyName"
                   / 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

    .title {
      grid-area: a;
    }

    .name {
      grid-area: b;
    }

    .mate {
      grid-area: c;
    }

    .parent {
      grid-area: d;
    }

    .name1 {
      grid-area: e;
    }

    .name2 {
      grid-area: f;
    }

    .parent1 {
      grid-area: g;
    }

    .upload1 {
      grid-area: upload1;
    }

    .upload2 {
      grid-area: upload2;
    }

    .sonsAndDaughters {
      grid-area: sonsAndDaughters;
    }

    .brotherAndSister {
      grid-area: brotherAndSister;
    }

    .familyName {
      grid-area: familyName;
    }

    .ranking {
      grid-area: ranking;
    }

    .birthday1 {
      grid-area: birthday1;
    }

    .birthday2 {
      grid-area: birthday2;
    }

    .personalProfile {
      grid-area: personalProfile;
      //超出两行省略号
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      -webkit-line-clamp: 3; //显示几行
      white-space: pre-wrap;
    }
  }

  .photoAlbum_bg {
    background: url($uni-bg-url-sq + '/index/photoAlbum_genealogy_bg.png') no-repeat;
    background-size: 100% 100%;
  }

  .bigPhoto {
    background: url($uni-bg-url-sq + '/index/photoAlbum_genealogy_bg_all.png') no-repeat;
    background-size: 100% 100%;
  }
</style>